import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import MultiSelect from '../../ch/components/MultiSelect.vue'
import Notification from '../../ch/components/Notification.vue'

<Meta
  title="Components/Form/MultiSelect"
  component={MultiSelect}
  argTypes={{
    bare: { control: { type: 'boolean' } },
    variant: {
      control: {
        type: 'select',
        options: ['outline', 'negative'],
      },
    },
    required: { control: { type: 'boolean' } },
    size: { control: { type: 'select', options: ['sm', 'base', 'lg'] } },
    label: {},
    disabled: { control: { type: 'boolean' } },
    hideLabel: { control: { type: 'boolean' } },
    multiple: { control: { type: 'boolean' } },
    placeholder: {},
    name: {},
    message: {},
    messageType: {
      control: {
        type: 'select',
        options: ['error', 'warning', 'success', 'info'],
      },
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MultiSelect },
  template: `
    <div style="padding: 20px 0 100px 0;">
      <MultiSelect
        :options="options"
        :variant="variant"
        :size="size"
        :label="label"
        :disabled="disabled"
        :hideLabel="hideLabel"
        :multiple="multiple"
        :name="name"
        :message="message"
        :messageType="messageType"
        :required="required"
        :selected="selected"
        :placeholder="placeholder"
        :excluded="excluded"
        :selectLimit="selectLimit"
        :bare="bare"
      />
    </div>
  `,
})

# MultiSelect

## General

- A multi select component is complex to style and customize without using a library. In this style guide, we use [Vue Select](https://vue-select.org/) to handle the logic and style of the select. Vue 2 and 3 are supported. To avoid a pollution of the CSS with Vue-only styles for other frameworks, all CSS definitions are scoped to the demo Vue component.

- The `MultiSelect` component is a wrapper around the `Vue Select` component.

- If you define the `multiple` prop to false, you can use this component instead of the standard `Select` component.

## Example

<Canvas>
  <Story
    name="Example"
    args={{
      options: [
        'Relatively long option',
        'Really long option that is so long that it will wrap to the next line',
        'foo',
        'bar',
        'baz',
      ],
      variant: 'outline',
      size: 'base',
      label: 'Label',
      disabled: false,
      hideLabel: false,
      name: 'select-name',
      multiple: true,
      bare: false,
      placeholder: 'Placeholder',
      excluded: ['foo'],
      selectLimit: 3,
      selected: ['bar', 'Relatively long option'],
      required: true
    }}
>
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

## Install Vue Select

```bash
npm install vue-select
```

## Overwrite Vue Select child components

The `Deselect` button and the `Openindicator` are two child components of the `Vue Select` component. You can overwrite them to match the style guide with the help of the following props:

```html
<vSelect :components="{Deselect, OpenIndicator}" ... />
```

and render directly the child components in the `data` function:

```js
export default {
  data: () => ({
    Deselect: {
      render: (createElement) => createElement('span', '×'),
    },
    OpenIndicator: {
      render: (createElement) => createElement('span'), // replace the default icon
    },
  }),
}
```
